<template>
  <div>
    <hr>
    <h1>孙子辈组件</h1>
    <h1>{{msg}}</h1>
    <h1>{{obj.sex}}</h1>
    <button @click="toChange">改变</button>
  </div>
</template>

<script >
import {inject,reactive,watch,toRefs,
  watchEffect,computed
} from 'vue'
  export default {
      data(){}, // ref 和reactive 
      methods:{},//普通函数 
      computed:{},//computed
      watch:{},//watch和watchEffect,
      mixins:{},
      props:{},//defineProps 
      provide:{},
      inject:{},
      mounted() {
        
      },
      components:{},
      // -------------------------


    setup(props){
        // this.$emit() //defineEmit()
        // this.$refs ----创建ref替代
        // this.$set() //vue3 解决了 vue2对象和数组新增数据无法及时响应的问题
        //this.$router  //useRouter 
        // this.$route //useRoute 
      
        // ---------------
   




      // let msg=inject(["key"])
      let msg=inject(["msg"])
      let state=reactive({
          count:1,
          name:"小王",
          obj:{
            sex:"男"
          }
      })
      let toChange=()=>{
        state.obj.sex="女"
      }
      // watch的深度监听和进入页面立即监听
      watch(()=>state.obj,(newVal,oldVal)=>{
          console.log(newVal,"-------")
      },{deep:true,immediate:true})

      // watchEffect 
      // 监听组件 写在其内部的数据 一进入页面就监听
      // 不需要规定监听的内容
      // 无法获取到原来的值
      // 有新的值，直接触发执行 watchEffect
      watchEffect(()=>{
          let x=state.obj.sex;
          console.log(x,"obj.sex数据变化了")

      })
      console.log(msg)
      return {
        msg,
        toChange,
        ...toRefs(state),
         
      }
    }
  }
</script>
